<template>
	<div>
		<el-button size="medium" type="primary" plain @click="add">添加资料</el-button>
		<div class="material-table">
			<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" max-height="580">
				<el-table-column prop="i" label="序号" fit width="50" fixed> </el-table-column>
				<el-table-column prop="title" label="标题" fit width="200"> </el-table-column>
				<el-table-column prop="type" label="类型" fit width="100"></el-table-column>
				<el-table-column label="图片" fit width="220">
					<template slot-scope="scope">
						<div v-if="scope.row.imageUrl.length > 0">
							<el-image v-for="(item, index) in scope.row.imageUrl" :key='index'
								style="width: 60px; height: 60px; margin-left: 5px;" :src="item"
								:preview-src-list="scope.row.imageUrl"></el-image>
						</div>
						<div v-else>
							<span>暂无图片</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="视频" fit width="100">
					<template slot-scope="scope">
						<el-button v-if="scope.row.videoUrl !== '' && scope.row.videoUrl !== null" type="text"
							@click="playVideo(scope.row)">播放视频</el-button>
						<span v-else>暂无视频</span>
					</template>
				</el-table-column>
				<el-table-column prop="viewCount" label="浏览次数" fit width="80"></el-table-column>
				<el-table-column prop="userName" label="发布人" fit width="100"></el-table-column>
				<el-table-column prop="createTime" label="发布时间" fit ></el-table-column>

				<el-table-column label="操作" width="100" fixed="right">
					<template slot-scope="scope">
						<div style="display: flex">
							<el-button @click="editGoods(scope.row)" type="text" size="mini">
								详情
							</el-button>
							<el-divider direction="vertical"></el-divider>
							<el-button @click="deleteGoods(scope.row.id)" type="text" size="mini">
								删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[10, 20, 50]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 播放视频 -->
		<el-dialog style="margin-top:0" :visible.sync="playVideoShow" width="60%" :title="material.title"
			@close="closeDialog">
			<video width="100%" height="450px" :src="material.videoUrl" controls></video>
		</el-dialog>
	</div>
</template>

<script>
	import apiURL from "../../../api/apiURL.js"
	import api from "../../../api/companyCulture.js"
	export default {
		components: {},
		data() {
			return {
				buttonValue: '点击上传',
				buttonType: 'primary',
				uploadSuccess: false,
				videoUploadPercent: 0,
				videoFlag: false,
				uploadVideo: apiURL.VIDEO_URL, // 视频上传地址
				// 表格加载
				loading: false,
				//表格数据
				tableData: [],
				READ_IMG_URL: apiURL.READ_IMG_URL,
				// 添加
				materialForm: {
					title: '', //标题
					type: 0, //类型
					content: '', // 内容
					imageUrl: '', // 图片地址
					videoUrl: '', // 视频地址
				},
				material: {
					title: '', //标题
					videoUrl: '', // 视频地址
				},
				playVideoShow: false,
				commentTitle: '',
				commentList: [],
				commentShow: false,
				//总条数
				total: 0,
				// 分页大小
				pageSize: 10,
				//记录当前页数
				currentPage: 1,
				// 类型
				materiaType: [{
						label: '学习资料',
						value: 0
					},
					{
						label: '培训视频',
						value: 1
					},
					{
						label: '会议视频',
						value: 2
					},
					{
						label: '公司介绍',
						value: 3
					},
					{
						label: '管理制度',
						value: 4
					}
				]
			};
		},
		mounted() {
			this.getMaterialList()

		},
		methods: {
			// 添加
			add() {
				this.$router.push({
					name: 'editMaterial',
					params: {
						type: 0
					}
				})
			},
			// 查询列表
			getMaterialList() {
				this.loading = true
				let page = {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}
				//console.log("page=>",page)
				api.getMaterialList(page).then(res => {
					if (res.code === 200) {
						this.loading = false
						this.tableData = new Array()
						//console.log("资料列表==>",res.data.materialList)
						if (res.data.materialList.length === 0) {
							return
						}
						this.total = res.data.total
						this.tableData = res.data.materialList.map((item, index) => {
							let images = []
							if (item.imageUrl !== null) {
								item.imageUrl.forEach(image => {
									images.push(this.READ_IMG_URL + image)
								})
							}
							let data = ''
							this.materiaType.forEach(type => {
								if (type.value === item.type) {
									data = type.label
								}
							})
							return {
								i: (this.currentPage - 1) * this.pageSize + index + 1,
								id: item.id,
								title: item.title,
								content: item.content,
								imageUrl: images,
								videoUrl: item.videoUrl,
								type: data,
								viewCount: item.viewCount,
								userName: item.nikeName,
								createTime: item.createTime
							}
						})
						//console.log("资料列表==>", this.tableData)
					}
				})

				this.loading = false

			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.getMaterialList()
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.currentPage = curPage
				this.getMaterialList()
			},
			// 详情
			editGoods(item) {
				this.$router.push({
					name: 'editMaterial'
				})
				localStorage.setItem("material", JSON.stringify(item))
			},
			// 删除
			deleteGoods(id) {
				this.$confirm('此操作将永久删除该资料, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const data = {
						id: id
					}
					api.deleteMaterial(data).then(res => {
						if (res.code === 200) {
							this.$message.success("删除成功！")
							this.currentPage = 1;
							this.pageSize = 10;
							this.getMaterialList();
						} else {
							this.$message.error("删除失败！")
						}
					})
				})

			},
			// 播放视频
			playVideo(item) {
				console.log("item==>", item)
				this.material.title = item.title;
				this.material.videoUrl = apiURL.READ_VIDEO_URL + item.videoUrl;
				//console.log("视频地址==>", this.material.videoUrl)
				this.playVideoShow = true;
			},
			// 关闭视频
			closeDialog() {
				this.material.title = '';
				this.material.videoUrl = '';
				this.playVideoShow = false;
			}
		},
	};
</script>

<style scoped>
	.page {
		text-align: center;
	}

	.material-table {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
</style>